<template>
  <div class="add-page">
    <el-dialog
      :visible.sync="visible"
      @close="closed"
      :modal-append-to-body="false"
      destroy-on-close
      title="新增页面"
      width="600px"
    >
      <div class="dialog-container">
        <el-form
          :model="formData"
          size="small"
          :rules="rules"
          ref="form"
          label-width="100px"
        >
          <el-row>
            <el-col :span="23">
              <el-form-item label="中文名称" prop="nameCn">
                <el-input v-model="formData.nameCn"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <el-form-item label="英文名称" prop="nameEn">
                <el-input v-model="formData.nameEn"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <el-form-item label="页面名称" prop="code">
                <el-input v-model="formData.code"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <el-form-item label="父页面编码" prop="parentCode">
                <el-input v-model="formData.parentCode" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <el-form-item label="中文描述">
                <el-input v-model="formData.describeCn"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <el-form-item label="英文描述">
                <el-input v-model="formData.describeEn"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <el-form-item label="标签">
                <el-input v-model="formData.label" readonly>
                  <el-button slot="append">添加</el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="md-component-btns">
          <el-button size="medium" type="primary" @click="save">保存</el-button>
          <el-button size="medium" @click="cancel">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/applicationManage/applicationManage";
import * as apiEntity from "@/api/modulManage/entity";

export default {
  name: "add-page",
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    designer: {
      type: Object,
      default: () => {
        return {};
      },
    },
    optionModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
    rowData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      formData: {
        nameCn: "",
        nameEn: "",
        describeCn: "",
        describeEn: "",
        applicationId: "",
        label: "",
        code: "",
        parentCode: this.rowData.code,
      },
      rules: {
        nameCn: [
          { required: true, message: "请输入中文名称", trigger: "blur" },
        ],
        nameEn: [
          { required: true, message: "请输入英文名称", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入页面名称", trigger: "blur" }],
      },
    };
  },
  methods: {
     saveAll(data) {
      let applicationId = localStorage.getItem("appId");
      // type entity实体创建的页面，normal 正常页面
      api["add"]({
        ...this.formData,
        json: JSON.stringify(data),
        applicationId,
        entity: this.optionModel.entity,
        type: "entity",
      }).then((res) => {
        this.$message.success("新增成功");
        this.$emit("triggerAddPage", {
          nameEn: this.formData.nameEn,
          code: this.formData.code,
          addPageId: res.data.data.oid,
          json: res.data.data.json,
        });
      });
    },
    async updateByEntity(val, widgetList) {
      if (val) {
        try {
          if (!val) {
            return;
          }
          const res = await apiEntity.getTypeAllAttributeByName({
            typeName: val,
          });
          if (!res.data || !res.data.data) {
            return;
          }
          const entityData = res.data.data;
          this.designer.attrList = [...res.data.data];
          this.designer.addParentFieldByData(widgetList, entityData);
          // 根据实体生成json
          const data = {
            widgetList: [widgetList],
            formConfig: { cssCode: "" },
            dataSource: [],
            dataSourceMap: {},
            pageScript: {
              data: "",
              methods: [],
              mounted: "",
              created: "",
            },
            templateScript: {},
          };
          this.saveAll(data);
        } catch (err) {}
      }
    },
    save() {
      this.$refs.form.validate((f) => {
        if (f) {
          const dataView = this.designer.copyNewContainerWidget(
            this.designer.getContainerByType("data-view")
          );
          dataView.options.entity = this.optionModel.entity;
          this.updateByEntity(this.optionModel.entity, dataView);
        }
      });
    },
    cancel() {
      this.$emit("triggerAddPage");
    },
  },
};
</script>

<style scoped lang="scss">
.dialog-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 500px;
  padding-left: 100px;

  > div:first-child {
    width: 40%;
  }

  > div:last-child {
    width: 58%;
  }
}
</style>

<style lang="scss">
.select-model-data {
  .el-dialog {
    .el-dialog__body {
      padding: 5px 20px;
    }
  }
}
</style>
